Skip to main content

Component Patterns

Cards​

Standard Card​

bg-white
rounded-2xl
shadow-lg hover:shadow-xl
transition-shadow duration-300
border border-gray-100
p-6 sm:p-8 lg:p-10

Dark Card​

bg-slate-800
rounded-2xl
shadow-xl
border border-gray-700

Buttons​

Primary (Category-Based)​

/* Education (Emerald) */
bg-gradient-to-r from-emerald-600 to-emerald-700
hover:from-emerald-700 hover:to-emerald-800
shadow-lg shadow-emerald-500/25

/* Accessibility (Purple) */
bg-gradient-to-r from-purple-600 to-purple-700
hover:from-purple-700 hover:to-purple-800
shadow-lg shadow-purple-500/25

/* Public (Orange) */
bg-gradient-to-r from-orange-600 to-orange-700
hover:from-orange-700 hover:to-orange-800
shadow-lg shadow-orange-500/25

/* Common properties */
text-white
px-5 py-2.5 sm:px-6 sm:py-3
rounded-xl
font-medium text-sm sm:text-base
transition-all duration-300

Secondary​

bg-white
border-2 border-gray-200 hover:border-gray-300
text-gray-700 hover:text-gray-900
px-5 py-2.5 sm:px-6 sm:py-3
rounded-xl
font-medium
transition-all duration-300
hover:shadow-md

Example​

const getCategoryColors = (category: 'education' | 'accessibility' | 'public') => {
  switch (category) {
    case 'education':
      return 'bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800 shadow-emerald-500/25';
    case 'accessibility':
      return 'bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 shadow-purple-500/25';
    case 'public':
      return 'bg-gradient-to-r from-orange-600 to-orange-700 hover:from-orange-700 hover:to-orange-800 shadow-orange-500/25';
  }
};

Status Badges​

/* Beta */
bg-blue-50 border border-blue-200 text-blue-700
px-3 py-1 rounded-lg font-medium text-sm

/* In Progress */
bg-indigo-50 border border-indigo-200 text-indigo-700

/* New */
bg-green-50 border border-green-200 text-green-700

/* Coming Soon */
bg-gray-50 border border-gray-200 text-gray-500

Accent Bars​

w-16 h-1 rounded-full mb-4 sm:mb-6
bg-emerald-500 / bg-purple-500 / bg-orange-500

Interactive States​

Hover Effects​

/* Shadows */
shadow-lg hover:shadow-xl

/* Colors */
bg-emerald-600 hover:bg-emerald-700

/* Transforms */
transform hover:scale-105
group-hover:translate-x-1

Transitions​

/* Quick */
transition-all duration-200

/* Standard */
transition-all duration-300

/* Smooth */
transition-transform duration-700

Focus States​

focus:outline-none
focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2

Images​

With Overlay​

<div className="relative">
  <Image src="..." fill className="object-cover" />
  <div className="absolute inset-0 bg-gradient-to-r from-gray-900/80 to-gray-900/20" />
  <div className="relative z-10">Content</div>
</div>

Hover Effect​

<Image className="object-cover scale-105 transition-transform duration-700 hover:scale-100" />

Special Effects​

Rotated Card (Meall an Óige)​

<div className="group relative inline-block">
  <div className="absolute inset-0 bg-gradient-to-r from-palatalised-500 to-palatalised-600 
                  rounded-2xl transform rotate-1 group-hover:rotate-2 
                  transition-transform duration-300" />
  <div className="relative bg-white rounded-2xl p-8 shadow-xl">
    Content
  </div>
</div>

Border Highlight​

border-l-4 border-palatalised-500
bg-palatalised-50 rounded-xl p-4

Accessibility​

  • Provide aria-label for icon-only buttons
  • Use semantic <button> elements
  • Ensure keyboard accessibility
  • Include alt text on images
  • Maintain proper heading hierarchy (h1 → h2 → h3)